<template>
  <a-modal
    :maskClosable="false"
    :title="modalTitle"
    v-model="visible"
    @ok="onClose"
    @cancel="onClose"
  >
    <a-spin :spinning="loading">
      <a-tabs v-model="tab" size="small" @change="onTabs">
        <!--      <template slot="tabBarExtraContent">-->
        <!--        <a-button size="small" type="default">更多详情</a-button>-->
        <!--      </template>-->
        <a-tab-pane key="1" tab="排名"></a-tab-pane>
        <a-tab-pane key="2" tab="领新"></a-tab-pane>
        <a-tab-pane key="3" tab="业绩"></a-tab-pane>
      </a-tabs>
      <div v-if="tab == 1">
        <a-table
          bordered
          size="small"
          :row-key="(record) => record.uid"
          :showHeader="false"
          :pagination="false"
          :columns="achievementColumns"
          :data-source="achievementData"
        >
          <!--          <template slot="no" slot-scope="text,record,index">-->
          <!--            <a-tag color="red">{{index + 1}}</a-tag>-->
          <!--          </template>-->
          <template slot="adviser_name" slot-scope="text">
            <a-tag color="red">{{ text }}</a-tag>
          </template>
          <template slot="by_yj" slot-scope="text">
            <a-tag color="red">{{ text }}</a-tag>
          </template>
        </a-table>
      </div>
      <div v-if="tab == 2">
        <a-row :gutter="10">
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="今日领新"
                :value="receiveData.this_today_zlx"
                :value-style="{ color: '#3f8600' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="当月领新"
                :value="receiveData.this_month_zlx"
                :value-style="{ color: '#3f8600' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="上月领新"
                :value="receiveData.last_month_zlx"
                :value-style="{ color: '#3f8600' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div v-if="tab == 3">
        <a-row :gutter="10">
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="当前业绩"
                :value="yjData.this_month_yj"
                :value-style="{ color: '#cf1322' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="目标业绩"
                :value="yjData.target_yj"
                :value-style="{ color: '#cf1322' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card>
              <a-statistic
                title="上月业绩"
                :value="yjData.last_month_yj"
                :value-style="{ color: '#cf1322' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getDataDetail } from '@/api/adviser'

export default {
  name: 'State',
  data () {
    return {
      loading: false,
      visible: false,
      modalTitle: '',
      currentTab: '',
      achievementColumns: [
        {
          title: '顾问姓名',
          dataIndex: 'adviser_name'
        },
        {
          title: '当前业绩',
          dataIndex: 'by_yj',
          scopedSlots: { customRender: 'by_yj' }
        }
      ],
      achievementData: [],
      receiveData: {},
      yjData: {},
      tab: '1'
    }
  },
  created () {
    this.initModal()
  },
  methods: {
    initModal () {
      const app = this
      app.loading = true
      if (app.tab === '1') {
        getDataDetail('rank').then(res => {
          if (res.status === 0) {
            app.modalTitle = '业绩排名'
            app.achievementData = res.result.data
            app.visible = true
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
      if (app.tab === '2') {
        getDataDetail('lx').then(res => {
          if (res.status === 0) {
            app.modalTitle = '当月领新'
            app.receiveData = res.result
            app.visible = true
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
      if (app.tab === '3') {
        getDataDetail('yj').then(res => {
          if (res.status === 0) {
            app.modalTitle = '业绩概况'
            app.yjData = res.result
            app.visible = true
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
    },
    onTabs (key) {
      this.initModal()
    },
    onClose () {
      this.visible = false
      this.$emit('cancel', this.visible)
    }
  }
}
</script>

<style scoped>

</style>
